<template>
  <div>
    <a-card
      style="width: 100%"
      title="跨界合作配置"
      :bordered="false"
      class="br-10"
    >
      <div class="card-view _p-20 disFlxJS _mt-30">
        <div>
          <h6 style="margin-bottom: 0;font-weight: bolder;">活动资源跨界合作开关</h6>
          <div class="tips _mt-5">默认关闭，开启后则两个机构合作时可选择活动资源合作，合作后则可互相推广活动。</div>
        </div>
        <div>
         <a-switch :checked="isChecked" :defaultChecked="isChecked" @change="handleChangeIsOpen" />
        </div>
      </div>
      <div class="card-view _p-20 disFlxJS _mt-30">
        <div>
          <h6 style="margin-bottom: 0;font-weight: bolder;">默认合作机构活动分润</h6>
          <div class="tips _mt-5">合作机构邀约用户参加活动后进行分润（活动暂未开放报名收费，现默认分润为0%）</div>
        </div>
        <h5>{{ percent }}%</h5>
      </div>
      <div class="text-center _mt-20">
        <a-button type="primary" size="large" style="width: 200px" @click="handleTenantSave">保存</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import { orgGetTenantInfoByProjectType, orgTenantOneSave } from '@/api/system/base'

export default {
  data () {
    return {
      /** 对外合作开关 */
      isOpen: 0,
      /** 会外佣金比例 */
      percent: 0,
      projectType: 4
    }
  },
  computed: {
    isChecked() {
      return this.isOpen === 0; 
    }
  },
  created() {
    orgGetTenantInfoByProjectType(this.projectType).then(res => {
      this.isOpen = res.data.isOpen
      this.percent = res.data.percent
    })
  },
  methods: {
    handleChangeIsOpen(val) {
      this.isOpen = val ? 0 : 1
    },
    handleTenantSave() {
      orgTenantOneSave({
        projectType: this.projectType,
        isOpen: this.isOpen,
        percent: this.percent
      }).then(() => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.card-view {
  background-color: #f7f8fa;
}
.tips {
  color: rgb(108, 108, 108);
  font-size: 14px;
}
</style>